<template>
  <div>
    <div class="container">
      <h2>共计<Strong style="color: red">{{totalAmount}}元</Strong></h2>
      <el-select v-model="payType" placeholder="请选择支付方式" style="margin-top: 20px">
        <el-option v-for="item in payTypeList" :label="item.name" :value="item.value"></el-option>
      </el-select>
      <div style="margin-top: 20px;text-align: center">
        <el-button type="primary" @click="submit" >支付</el-button>
      </div>


    </div>
  </div>
</template>

<script>
import {pay} from "@/api/order";

export default {
  name: "Pay",
  props: {
    totalAmount: {
      type: String,
      default: 0
    },
    orderId: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      payTypeList:[{
        name:"微信支付",value:2
      },
        {
          name:"支付宝支付",value:1
      }],
      payType: null,
    }
  },
  watch: {
    orderId:{
      handler(val){
        this.orderId = val;
      },
      immediate:true
    },
    totalAmount:{
      handler(val){
        this.totalAmount = val;
      },
      immediate:true
    },
  },
  methods: {
    submit() {
      let params = {
        orderId: this.orderId,
        payType: this.payType,
      }
      pay(params).then(res => {
        this.$message.success("支付成功");
        location.reload();
      })
    }
  }
}
</script>

<style>

</style>